<template>
  <div>
    <el-empty description="还没有收到回复哦" v-if="comments.length===0"></el-empty>
    <div v-for="(item,i) in comments" :key="i" class="author-title reply-father" v-else>
      <div class="author-info">
        <el-link type="primary" target="_blank" class="author-name">{{ item.username }}</el-link>
        <span class="author-time">{{ item.date }}</span>
      </div>
      <!--     <div class="icon-btn">-->
      <!--        <span @click="showReplyInput(i,item.username,item.id)"><i-->
      <!--          class="iconfont el-icon-s-comment"></i>&lt;!&ndash;{{ item.commentNum }}&ndash;&gt;</span>-->
      <!--     </div>-->
      <div class="talk-box">
        <p>
          <span class="reply">{{ item.content }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyComment",
  data() {
    return {
      comments: [],
      showInput:[]
    }
  },
  methods:{

  },
  mounted() {
    this.$axios.get('/comment/getRecent').then(res => {
      this.comments = res.data.data
    }).catch(res => {
      console.log(res)
    })
  }
}
</script>

<style scoped lang="css">
.author-title .author-info {
  display: inline-block;
  margin-left: 5px;
  width: 60%;
  height: 40px;
  line-height: 20px;
  display: flex;
  right: 10%
}

.author-info > span {
  display: block;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.author-info .author-name {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
}

.author-info .author-time {
  font-size: 14px;
  margin-left: 20px;
  display: inline-block;
}

.icon-btn {
  width: 30%;
  padding: 0 !important;
  float: right;
}

@media screen and (max-width: 1200px) {
  .author-title .icon-btn {
    width: 20%;
    padding: 7px;
  }
}

.icon-btn > span {
  cursor: pointer;
}

.icon-btn .iconfont {
  margin: 0 5px;
}

.talk-box {
  margin: 0 50px;
}

.talk-box > p {
  margin: 0;
}

.talk-box .reply {
  display: flex;
  left: 0;
  font-size: 16px;
  color: #000;
}
</style>
